<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="visible"
    center
    width="40%"
  >
    <slot></slot>
    <div class="dialog-footer" slot="footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button @click="sure" type="primary">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
	export default {
		name: 'Dialog',
		props: {
			// 是否显示
			dialogVisible: {
				required: true,
				type: Boolean
			},
			// 弹框标题
			dialogTitle: {
				required: true,
				type: String
			}
		},
		data() {
			return {
				item: null
			}
		},
		methods: {
			// 取消
			cancel() {
				this.$emit('changeVisible', 'cancel')
			},
			// 确定
			sure() {
				this.$emit('changeVisible', 'sure')
			}
		},
		computed: {
			// 定义一个变量,这个变量可以设置,可以获得
			visible: {
				get: function () {
					return this.dialogVisible
				},
				set: function () {
					this.$emit('changeVisible', 'cancel')
				}
			}
		}
	}
</script>

<style scoped>

</style>
